import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

const MyTabBar = () => {
    const nav=useNavigate()
    const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  return (
    <div>
        <TabBar  onChange={value => nav(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default MyTabBar
